import React, { useEffect, useState } from 'react'
import { Sticky, NavBar, Toast, Stepper, Button, Card, Cell, Checkbox } from 'react-vant'
import { ArrowLeft, Arrow } from '@react-vant/icons';
import '../../css/jly/OrdersTwo.css'
import { Price } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { useNavigate, useSearchParams } from 'react-router-dom';
import axios from 'axios'
export default function OrdersTwo() {
    const navigate = useNavigate();
    //获取参数
    const [odrOne, setOdrOne] = useState([]);
    let getodrOne = () => {
        let arr = JSON.parse(localStorage.getItem('data')) || [];
        setOdrOne(arr);
    }
    useEffect(() => {
        getDetail()
        getodrOne()
        // getData()

        getPerson()
        getArred()
    }, [])
    //获取后端订单数据
    const [order, setOrder] = useState([]);
    let getData = async () => {
        let { data: { code, data } } = await axios.get('http://127.0.0.1:3000/getOrder')
        if (code === 200) {
            setOrder(data)
        }
    }

    //获取商品详情
    const [shangID, setShangID] = useState([]);
    let getDetail = async () => {
        let a = localStorage.getItem('shangID')
        console.log(a);
        let { data: { code, data } } = await axios.get('http://127.0.0.1:3000/getDetail', { params: { id: a } })
        if (code === 200) {
            console.log(data);
            setShangID(data)
        }
    }

    //观演人
    const [person, setPerson] = useState([]);
    let getPerson = async () => {
        let { data: { data, code } } = await axios.get('http://127.0.0.1:3000/getPerson')
        if (code === 200) {
            setPerson(data)
        }
    }

    //添加观演人
    let navPerson = () => {
        navigate('/insertuser')
    }

    //跳转支付页面
    let navZfb = async () => {
        let spea = person.filter(item => {
            if (item.flag === true) {
                return item._id
            }
        })
        let arr = []
        spea.forEach(item => {
            arr.push(item._id)
        })
        let data = {
            _id: shangID._id,
            price: odrOne.price + 10,
            orderId: +new Date(),
            name: shangID.name,
            time: shangID.time,
            area_id: area[0]._id,
            address: shangID.address,
            img: shangID.img,
            flag: 0,
            num: odrOne.num,
            spectator_id: arr
        }
        localStorage.setItem('orderData', JSON.stringify(data))
        let { data: { code } } = await axios.post('http://127.0.0.1:3000/addOrder', { data: data })
        getchangeId()
        navigate('/zfbyes')
    }

    let getchangeId = async () => {
        let { data: { code, data } } = await axios.get('http://127.0.0.1:3000/getOrder')
        if (code === 200) {
            let a = data.pop()
            console.log(a);
            localStorage.setItem('orderID', a._id)
            localStorage.setItem('orderPrice', a.price)
        }
    }


    //获取地址
    const [area, setArea] = useState([])
    let getArred = async () => {
        let { data: { code, data } } = await axios.get('http://127.0.0.1:3000/getArea')
        if (code === 200) {
            setArea(data)
        }
    }

    //跳转地址选择页面
    let navArred = () => {
        navigate('/')   //预留
    }


    //添加观演人信息
    const [ones, setOnes] = useState([])
    let addArr = (id) => {
        let arr = [...person]
        arr.filter(item => {
            if (item._id === id) {
                item.flag = !item.flag
            }
        })
        setPerson(arr)
    }

    // console.log(shangID)

    return (
        <div className='OrdersTwo'>
            <Sticky>
                <NavBar
                    title="订单结算"
                    leftText={<ArrowLeft />}
                    onClickLeft={() => navigate(-1)}
                />
            </Sticky>
            {/* <button onClick={() => { console.log(odrOne, order, person); }}> sdf</button> */}
            <div className='Ot_info'>
                <div className='Ot_info_top'>
                    <Card round>
                        <Card.Header border className='Ot_card_one_header'>
                            {/* {JSON.stringify(shangID)}1111111111111111111111 */}
                           
                            <p style={{ fontSize: '16px', fontWeight: 'bold' }}>{shangID.name !=undefined ?shangID.name : ''}</p>
                            <p style={{ color: 'gray' }}>{shangID.address != undefined ?shangID.address : ''}</p>
                        </Card.Header>
                        <Card.Body>
                            <p>{shangID.time != undefined ?shangID.time : null}</p>
                            <p>{odrOne.cate}{odrOne.price / odrOne.num}元 {odrOne.num}张</p>
                        </Card.Body>
                    </Card>
                </div>


                <div className='Ot_info_top'>
                    <Card round>
                        <Card.Header border >
                            <div className='Ot_card_two_header'>
                                <div>
                                    选择观演人
                                </div>
                                <div style={{ color: "orangered", marginLeft: "180px" }} onClick={() => { navPerson() }}>
                                    +新建
                                </div>
                            </div>
                        </Card.Header>
                        <Card.Body>
                            {
                                person.map(item => (

                                    <Cell
                                        valueClass='Ot_cell_value'
                                        titleClass='Ot_cell_title'
                                        key={item._id}
                                        title={<Checkbox shape='square' onChange={() => { addArr(item._id) }} value={item.flag} defaultChecked={item.flag}>{item.name}</Checkbox>}
                                        value={item.idcard}
                                    />
                                ))
                            }
                            {/* <Cell title={<Checkbox defaultChecked shape='square'>{person.name}</Checkbox>} value='32154444444444' /> */}

                        </Card.Body>
                    </Card>
                </div>


                {
                    odrOne.host === '快递配送' ? <div className='Ot_info_top'>
                        <Card round>
                            <Card.Header border >
                                <div className='Ot_card_two_header'>
                                    <div>
                                        取票方式
                                    </div>
                                    <div style={{ marginLeft: "170px" }}>
                                        快递配送
                                    </div>
                                </div>
                            </Card.Header>
                            <Card.Body onClick={() => { navArred() }} className='disss'>

                                {/* <Cell title={area[0].name} value={<Arrow></Arrow>} label={area[0].address} /> */}
                                {
                                    area.map(item => (
                                        <div key={item._id}>
                                            <div className='nnnn'>
                                                {item.name}
                                            </div>
                                            <div className='ssss'>
                                                {item.address}
                                            </div>
                                        </div>
                                    ))
                                }
                                <div>
                                    <Arrow></Arrow>
                                </div>
                            </Card.Body>
                            <Card.Footer border style={{ display: "flex", justifyContent: "space-between", marginRight: '20px' }}>
                                <span>配送费</span>
                                <span>￥10</span>
                            </Card.Footer>
                        </Card>
                    </div> : <div className='Ot_info_top'>
                        <Card round>
                            <Card.Header border >
                                <div className='Ot_card_two_header'>
                                    <div>
                                        取票方式
                                    </div>
                                    <div style={{ marginLeft: "170px" }}>
                                        现场取票
                                    </div>
                                </div>
                            </Card.Header>
                            <Card.Body>

                                <div className='Ot_card_two_header'>
                                    <div>
                                        取票人
                                    </div>
                                    <div style={{ marginLeft: "200px" }}>
                                        李小明
                                    </div>
                                </div>

                            </Card.Body>
                            <Card.Footer border style={{ display: "flex", justifyContent: "space-between", marginRight: '20px' }}>
                                <span>配送费</span>
                                <span>￥10</span>
                            </Card.Footer>
                        </Card>
                    </div>
                }
                {/* <div className='Ot_info_top'>
                    <Card round>
                        <Card.Header border >
                            <div className='Ot_card_two_header'>
                                <div>
                                    取票方式
                                </div>
                                <div style={{ marginLeft: "170px" }}>
                                    快递配送
                                </div>
                            </div>
                        </Card.Header>
                        <Card.Body>

                            <Cell title='李小明' value={<Arrow></Arrow>} label='32154444444444' />

                        </Card.Body>
                        <Card.Footer border style={{ display: "flex", justifyContent: "space-between"}}>
                            <span>配送费</span>
                            <span>￥10</span>
                        </Card.Footer>
                    </Card>
                </div> */}
                <p className='Ot_bottom_info'>由于票据的时效性，所有票品一经售出不退不换。</p>
                <p className='Ot_bottom_info'>点击提交订单视为同意 <a href="#">《服务条款》</a></p>
            </div>

            <div className='boooo'>

            </div>
            <Sticky position='bottom'>
                <div className='Ot_bottom'>
                    <div className='Ot_bottom_left'>
                        <span>合计： <Price price={odrOne.price + 10} size="large" thousands /></span>
                    </div>
                    <div className='Ot_bottom_right'>
                        <Button type='danger' style={{ width: '100%' }} onClick={() => { navZfb() }}>确定</Button>
                    </div>
                </div>
            </Sticky>
        </div>
    )
}
